/*
 * @Author: hanyu 
 * @Date: 2018-05-10 11:46:45 
 * @Last Modified by: hy
 * @Last Modified time: 2018-06-21 15:45:49
 */
<template>
  <bg-lay-out>
  <div slot="headerText">房联行数据中心</div>
  <!-- <sel-top-time slot="headerMain" style="text-align:center;margin-top: 29px;" val="2"  @onChangeTime="onChangeTime"></sel-top-time> -->
  <div slot="main">
      <div class="transAnalysis">
        <div class="myMainClass">
          <div class="changeTop">
            <div class="changeTop-option">
            <sel-time @onChangeTime="changeTimeScope"></sel-time>
            <area-or-shop @onChangeAreaOrShop="onChangeAreaOrShop"></area-or-shop>
            <el-radio-group @change="changeStoresIncomeDefault" class="radioCon changeZb" v-model="queryType" style="display: flex; align-items: center; width: 100%;">
              <b style="color: #31cee6; font-size: 16px;margin-left: 1em; margin-right: 10px;">指标：</b>
              <div style="border: 1px solid rgba(49,206,230,0.5);border-radius: 6px;">
                  <el-radio-button :label="18028">业绩</el-radio-button>
                  <el-radio-button :label="18006">收入</el-radio-button>
              </div>
            </el-radio-group>
        </div>
        <el-row :gutter="20" align="center"  class="topCellCon" style="margin-left:80px;margin-right:80px">
          <el-col class="topCellConLeft" style="padding-left: 10px;padding-right: 80px;">
              <el-col :xs="4" :sm="4" :md="4" :lg="4"  style="text-align: center;">
                <div  class="topCellItem" style="margin-bottom:10px">
                  <div class="topCellItemText">{{queryType==18028?"成交总业绩":"成交总收入"}}</div>
                  <div class="topCellItemVal topCellItemVal84" :style="{fontSize: totalData.total > 10000 ? '50px':'84px'}"><b>{{totalData.total}}</b></div>
                </div>
              </el-col>
              <el-col :key="index" v-for="(item,index) in totalData.list" :xs="3" :sm="3" :md="3" :lg="3" style="text-align: center;">
                <div  class="topCellItem">
                  <div class="topCellItemText" style="font-size:18px;"> {{ item.name }} </div>
                  <div class="topCellItemVal"  style="font-size:42px;">{{item.value}}</div>
                </div>
              </el-col>
          </el-col>
          <el-col v-if="pieChartShow"  :xs="8" :sm="8" :md="8" :lg="8" style="margin-left:20px;">
            <chart-lay-out :showTitle="false">
              <pie-chart slot="main" v-model="propertiesAnalysisArr" :option="pieOption"></pie-chart>
            </chart-lay-out>
          </el-col>
        </el-row>
    </div>
    <div class="changeCen">
      <div class="changeCen-left">
        <div>
          <el-row>
            <el-row class="changeCen-left-analysis">
              <div class="changeCen-left-analysis-option">
                <el-row class="bigTitleCon">
                  <b style="color: #2ff0d2; font-size: 20px;"><i class="changeCen-i"></i>趋势分析</b>
                </el-row>
                <el-row v-if="queryType==18028" class="bigTitleCon">
                  <el-col :xs="24" :sm="24" :md="24" :lg="24" style="text-align: left;">
                    <el-radio-group v-model="tradeType" @change="fetchGetDoubleDetailList">
                      <div class="changeCen-left-analysis-option-select">
                        <el-radio-button label="">全部</el-radio-button>
                        <el-radio-button
                        v-for="item in options"
                        :key="item.value"
                        :label="item.value">
                        {{item.label}}
                        </el-radio-button>
                      </div>
                    </el-radio-group>
                  </el-col>
                </el-row>
              </div>
          <chart :chartStyle="'min-width:50rem;min-height:30rem;height:30rem'" :option="transactionStatisticOption" class="changeCen-left-analysis-chart" />
          </el-row>
        </el-row>
        </div>
      </div>
      <!-- 业绩详情 收入详情 table -->
      <div class="changeCen-right">
        <el-row>
            <div v-if="isQueryType" :data="tableData" class="changeCen-right-tableData">
              <b style="color: #2ff0d2; font-size: 20px;"><i class="changeCen-i"></i>业绩详情</b>
              <div class="myTable">
                    <el-table
                      :row-style="{background:'transparent'}"
                      :cell-style="{background:'transparent',borderBottom:0}"
                      :header-row-style="{background:'transparent',color:'#2ff0d2'}"
                      :header-cell-style="{background:'transparent',borderBottom:'1px solid rgba(47, 240, 210,0.5)'}"
                      :data="tableData"
                      class="tableStyle"
                      style="width: 100%;border-bottom:0;color:#2ff0d2;font-size:18px">
                            <el-table-column
                              prop="name"
                              label="区域"
                              width="180">
                            </el-table-column>
                            <el-table-column
                              prop="value3"
                              label="代办"
                              width="180">
                            </el-table-column>
                            <el-table-column
                              prop="value2"
                              label="三方">
                            </el-table-column>
                            <el-table-column
                              prop="value1"
                              label="租赁">
                            </el-table-column>
                            <el-table-column
                              prop="sumValue"
                              label="总成绩">
                            </el-table-column>
                  </el-table>
              </div>
            </div>
        </el-row>
        <el-row >
            <div v-if="!isQueryType" :data="tableData2" class="changeCen-right-tableData2">
              <b style="color: #2ff0d2; font-size: 20px;"><i class="changeCen-i"></i>收入详情</b>
              <div class="myTable">
                <el-table
                      :row-style="{background:'transparent'}"
                      :cell-style="{background:'transparent',borderBottom:0}"
                      :header-row-style="{background:'transparent',color:'#2ff0d2'}"
                      :header-cell-style="{borderBottom:'1px solid rgba(47, 240, 210,0.5)'}"
                      :data="tableData2"
                      style="width: 100%;border-bottom:0;color:#2ff0d2;font-size:18px">
                            <el-table-column
                              prop="name"
                              label="区域"
                              width="180">
                            </el-table-column>
                            <el-table-column
                              prop="value1"
                              label="代办"
                              width="180">
                            </el-table-column>
                            <el-table-column
                              prop="value2"
                              label="三方">
                            </el-table-column>
                            <el-table-column
                              prop="value3"
                              label="租赁">
                            </el-table-column>
                            <el-table-column
                              prop="value4"
                              label="总业绩">
                            </el-table-column>
                  </el-table>
              </div>
            </div>
        </el-row>
      </div>
    </div>
    </div>
  </div>
</div>
</bg-lay-out>
</template>
<script>
import chartLayOut from "@/components/Charts/chartLayOut";
import pieChart from "@/components/Charts/pieChart";
import areaOrShop from "@/components/branch/areaOrShop";
import selTime from "@/components/branch/selTime";
import chart from "../../../../components/Charts/newChart";
import {
  GetDataByTargetForTwo, // 单项指标统计
  GetDoubleDetailList, // 指定指标指定时间段按日按周按月 按类型、指标 增量（双项)
  GetDetailNew // 成交量/业绩/总收入/实勘/带看详细
} from "@/api/flh/home";
import bgLayOut from "@/components/bgLayOut/index";
import selTopTime from "@/components/flh/selTime";
import myTable from "@/components/branch/myTable";
const lineCircle2 =
  "";
const lineCircle =
  "";

export default {
  components: {
    chart,
    areaOrShop,
    selTime,
    bgLayOut,
    selTopTime,
    myTable,
    pieChart,
    chartLayOut
  },
  data() {
    return {
      cityId: 0,
      pieOption: {
        legend: {
          bottom: 0
        },
        center: ["50%", "50%"]
      },
      pieChartShow: true, // 饼图是否显示
      propertiesAnalysisArr: [], // 房源成交收入
      transactionStatisticOption: {}, // 户型成交统计
      time: [], // 时间
      compareTime: [], // 对比时间
      isCompare: false, // 是否对比
      queryType: 18028, // 类型
      isQueryType: true, // 是否业绩
      totalData: {}, // 总数据
      tableData: [], // 表格数据
      tableData2: [], // 第二个表格数据
      tableHeads: [
        { key: "name", name: "区域" },
        { key: "value3", name: "代办" },
        { key: "value2", name: "三方" },
        { key: "value1", name: "租赁" },
        { key: "sumValue", name: "总业绩" }
      ],
      tableHeads2: [
        { key: "name", name: "区域" },
        { key: "value1", name: "租赁服务费" },
        { key: "value2", name: "居间服务费" },
        { key: "value3", name: "风险保障金" },
        { key: "value4", name: "评估费结转" },
        { key: "sumValue", name: "收入" }
      ],
      tradeType: "", // 类型
      areaId: "", // 区域Id
      shopId: "", // 门店Id
      options: [
        {
          value: "1",
          label: "租赁"
        },
        {
          value: "2",
          label: "三方"
        },
        {
          value: "8",
          label: "代办"
        }
      ]
    };
  },
  methods: {
    formatterLine(res, params, unit) {
      var minResult = "";
      params.forEach(item => {
        var minItem =
          '<div style="display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 10px"><span>' +
          item.seriesName +
          '</span><span style="margin-top:2px;font-family:DIN Condensed Bold;font-size:20px">' +
          item.value +
          "</span></div>";
        minResult += minItem;
      });
      var imgConStart =
        '<div style="display:flex;padding:12pt 12pt 12pt 12pt;color:#31cee6;flex-direction:column;background:rgba(0,0,0,0.7);border-radius:10px">' +
        '<div style="width:100%;display:flex;align-items:center;justify-content:space-between;flex-direction:row;margin-top:8pt">';

      var result =
        minResult === ""
          ? imgConStart + "</div>"
          : imgConStart + minResult + "</div>";
      return result;
    },
    // 切换选项事件
    changeStoresIncomeDefault() {
      this.fetchData();
    },
    // 时间
    changeTimeScope(res) {
      this.$set(this, "time", res.time);
      if (Object.keys(res).length === 2) {
        // 对比时间时间
        this.$set(this, "compareTime", res.compareTime);
        this.$set(this, "isCompare", true);
      } else {
        this.$set(this, "isCompare", false);
      }
      this.fetchData();
    },
    // 区域
    onChangeAreaOrShop(item) {
      this.$set(this, "areaId", item.areaId);
      this.$set(this, "shopId", item.shopId);
      this.fetchData();
    },
    // 获取饼图数据
    async fetchGetDataByTargetForTwo() {
      var params = {
        cityId: this.cityId,
        startTime: this.time[0], // 开始时间
        endTime: this.time[1], // 结束时间
        areaId: this.areaId, // 区域Id
        storeId: this.shopId, // 门店Id
        queryType: this.queryType // 类型
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          this.pieChartShow = res.data.result.total !== "0" && true;
          this.$set(this, "totalData", res.data.result);
          this.initPropertiesAnalysisArrChart(res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取折线图数据
    async fetchGetDoubleDetailList() {
      var newQueryType = this.queryType === 18028 ? 18027 : 18006;
      var params = {
        cityId: this.cityId,
        startTime: this.time[0], // 开始时间
        endTime: this.time[1], // 结束时间
        areaId: this.areaId, // 区域Id
        storeId: this.shopId, // 门店Id
        queryType: newQueryType, // 请求类型
        tradeType: this.tradeType, // 类型
        timeType: 3004 // 时间类型
      };
      try {
        var res = await GetDoubleDetailList(params);
        if (res.data.code === "0") {
          if (this.isCompare) {
            var compareParams = {
              startTime: this.compareTime[0], // 开始时间
              endTime: this.compareTime[1], // 结束时间
              areaId: this.areaId, // 区域Id
              storeId: this.shopId, // 门店Id
              queryType: newQueryType, // 请求类型
              tradeType: this.tradeType, // 类型
              timeType: 3004 // 时间类型
            };
            var compareRes = await GetDoubleDetailList(compareParams);
            var compareResult = compareRes.data.result;
          }
          this.initTransactionStatisticChart(res.data.result, compareResult);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取表格数据
    async fetchGetDetailNew() {
      var newQueryType;
      if (this.queryType === 18028) {
        // 业绩
        if (!this.storeId) {
          // 区域业绩
          newQueryType = 22003;
        } else {
          // 门店业绩
          newQueryType = 22004;
        }
      } else {
        // 收入
        this.$set(this, "tradeType", "");
        if (!this.storeId) {
          // 区域收入
          newQueryType = 22005;
        } else {
          // 门店收入
          newQueryType = 22006;
        }
      }
      var params = {
        cityId: this.cityId,
        startTime: this.time[0], // 开始时间
        endTime: this.time[1], // 结束时间
        areaId: this.areaId, // 区域Id
        storeId: this.shopId, // 门店Id
        queryType: newQueryType, // 类型
        timeType: 3004 // 时间类型
      };
      try {
        var res = await GetDetailNew(params);
        if (res.data.code === "0") {
          console.log(res.data.result);
          if (this.queryType === 18028) {
            this.$set(this, "tableData", res.data.result);
            this.$set(this, "isQueryType", true);
          } else {
            this.$set(this, "tableData2", res.data.result);
            this.$set(this, "isQueryType", false);
          }
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 组装折线图数据
    initTransactionStatisticChart(res, compareRes) {
      var xData = [];
      var allData = [];
      var allLength = [];
      var unit = "";
      var time;
      var data1 = {
        data: [],
        name: this.time[0] + "-" + this.time[1],
        type: "line",
        smooth: true,
        areaStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(141,76,253,0.5)" //  0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(141,76,253,0)" //  100% 处的颜色
                }
              ],
              globalCoord: false //  缺省为 false
            },
            shadowColor: "rgba(0, 0, 0, 0.1)",
            shadowBlur: 10
          }
        },
        symbol: "image:// " + lineCircle2,
        barWidth: 20
      };
      var data2 = {
        data: [],
        name: this.compareTime[0] + "-" + this.compareTime[1],
        type: "line",
        smooth: true,
        areaStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(141,76,253,0.5)" //  0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(141,76,253,0)" //  100% 处的颜色
                }
              ],
              globalCoord: false //  缺省为 false
            },
            shadowColor: "rgba(0, 0, 0, 0.1)",
            shadowBlur: 10
          }
        },
        symbol: "image:// " + lineCircle,
        barWidth: 20
      };
      var legend = [];
      var legendItem = [
        this.time[0] + "-" + this.time[1],
        this.compareTime[0] + "-" + this.compareTime[1]
      ];
      legendItem.forEach(aa => {
        var obj = {
          name: "",
          icon: "circle",
          textStyle: {
            color: "#31cee6",
            fontSize: 14,
            padding: [0, 10]
          }
        };
        obj.name = aa;
        legend.push(obj);
      });
      this.time[0].replace(/-/g, "/") + "-" + this.time[1].replace("-", "/");
      if (this.isCompare) {
        var compareTime =
          this.compareTime[0].replace(/-/g, "/") +
          "-" +
          this.compareTime[1].replace(/-/g, "/");
      }
      if (this.queryType === 18028) {
        // 业绩
        allLength.push(time + "  业绩");
        if (this.isCompare) {
          allLength.push(compareTime + "  业绩");
        }
      } else {
        // 收入
        allLength.push(time + "  收入");
        if (this.isCompare) {
          allLength.push(compareTime + "  收入");
        }
      }
      res.forEach(item => {
        xData.push(item.xData1);
        data1.data.push(item.value);
      });
      allData.push(data1);
      if (this.isCompare) {
        compareRes.forEach(item2 => {
          // 	                    xData.push(item2.xData1);
          data2.data.push(item2.value);
        });
        allData.push(data2);
        var a = allLength[0] + "对比";
        allLength.push(a);
      }
      var option = {
        dataZoom: [
          {
            bottom: 45,
            left: 80,
            width: 650
          }
        ],
        xAxis: {
          data: xData,
          axisLabel: {
            rotate: 45,
            formatter: function(value, index) {
              return "{value|" + value + "}";
            }
          }
        },
        legend: {
          show: false,
          data: legend,
          right: "0",
          orient: "vertical",
          top: "center"
        },
        tooltip: {
          axisPointer: {
            shadowStyle: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,209,255,0.2)" // 100% 处的颜色
                  }
                ]
              }
            }
          },
          formatter: params => this.$utils.formatterLine(res, params, unit)
        },
        series: allData
      };
      this.$set(this, "transactionStatisticOption", option);
    },
    // 饼图
    initPropertiesAnalysisArrChart(resData) {
      // var unit = this.queryType === 18028 ? "业绩" : "收入";
      this.$set(this, "propertiesAnalysisArr", resData.list);
    },
    forEachFun(initData) {
      // 处理数据生成Option
      var option = this.$utils.returnItemSeries(initData);
      this.$set(this, initData.returnOption, option);
      var self = this;
      setTimeout(function() {
        if (self.$refs[initData.refName][0]) {
          self.$refs[initData.refName][0].initChart();
        } else {
          self.$refs[initData.refName].initChart();
        }
      }, 0);
    },
    // 获取数据
    fetchData() {
      this.fetchGetDataByTargetForTwo(); // 饼图
      this.fetchGetDoubleDetailList(); // 折线图
      this.fetchGetDetailNew(); // 表格数据
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>
<style>
@import "../../../../styles/element-ui/tableStyle.scss";
</style>

<style scoped lang="scss">
@import "../../../../styles/base/_parameters";

.topCellConLeft {
  @include flex-ic-jsa;
  margin-top: 70px;
}
.topCellCon {
  @include flex-ic-jsa;
  height: 240px;
  padding: 0 29px;
  margin-top: 60px;
}
.topCellItem {
  vertical-align: center;
  color: white;
  float: left;
  width: 100%;
  padding: 1em 0;
}
.topCellItemText {
  font-size: 24px;
  color: #2ff0d2 !important;
  vertical-align: center;
}
.topCellItemVal {
  @include din(28px);
  color: #2ff0d2;
}
.topCellItemVal84 {
  font-size: 84px;
}
</style>

<style lang="scss">
@import "../../../../styles/base/_parameters";

.transAnalysis {
  .el-table__body-wrapper {
    height: 420px;
    overflow: scroll;
  }
  .myMainClass {
    /* margin-top: 70px; */
    margin-top: 0;
  }
  .myMainClass .changeTop {
    margin-top: 20px;
  }
  .myMainClass .el-radio-button:first-child .el-radio-button__inner {
    border-left: none;
  }
  .el-select-dropdown__item.selected {
    color: #ffffff;
    background-color: rgba(#000, 0.5);
  }
  .el-select-dropdown__item.selected.hover {
    background-color: #fff;
    color: black;
  }
  .el-input.is-disabled .el-input__inner {
    background: none;
  }
  .myMainClass .el-input__inner {
    color: #31cee6 !important;
    background: none;
    @include border(1px, rgba(#31cee6, 0.5), whole);
  }
  .myMainClass .el-select .el-input .el-select__caret {
    color: #1776fd;
  }
  .myMainClass .el-table--border td,
  .el-table--border th {
    background-color: #111f44;
    @include border(1px, #1776fd, right);
  }
  .myMainClass .el-table--border,
  .el-table--group {
    @include border(1px, #1776fd, whole);
  }
  .myMainClass .el-table td,
  .el-table th.is-leaf {
    @include border(1px, #1776fd, bottom);
  }
  .myMainClass .el-table--border th,
  .el-table__fixed-right-patch {
    @include border(1px, #1776fd, bottom);
  }
  .myMainClass .el-table thead.is-group th {
    background: #1a61e0;
    color: white;
  }
  .myMainClass .el-table {
    color: white;
  }
  .myMainClass .el-radio-button__inner {
    background: none;
    border: none;
    color: #31cee6;
  }
  .myMainClass .el-radio__input.is-checked + .el-radio__label {
    color: cyan;
  }
  .myMainClass .el-table,
  .mySelTime .el-input__inner,
  .el-input.is-disabled .el-input__inner,
  .changeTop {
    padding: 70px 40px;
    @include moduleBg(bg_1812x433);
  }
  .myMainClass .el-table {
    padding: 0;
    background: transparent;
  }
  .el-table__header-wrapper,
  .el-table__body-wrapper {
    margin-top: 10px;
  }
  .el-table th,
  .el-table tr {
    background-color: transparent;
  }
  .el-table::before {
    display: none;
  }
  .changeTop div {
    padding: 0 !important;
    margin-bottom: 5px;
    background: transparent !important;
  }
  .changeTop-option {
    position: relative;
  }
  .changeTop-option:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -40px;
    width: 1712px;
    height: 8px;
    @include bgImg(minLine);
  }
  .changeTop .bigTitleCon b {
    color: #31cee6 !important;
    font-size: 16px;
  }
  .changeTop .bigTitleCon [role="radiogroup"] {
    border-color: rgba(#31cee6, 0.5) !important;
  }
  .el-checkbox {
    @include inlineFlex-ic;
    margin-right: 1em;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: transparent;
    border-color: #31cee6;
  }
  .el-checkbox__inner::after {
    border-color: #31cee6 !important;
  }
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    color: #000 !important;
    background-color: #31cee6;
    border-color: #31cee6;
  }
  .myButton,
  .el-checkbox__label {
    color: #31cee6 !important;
  }
  .el-checkbox__inner {
    width: 15px;
    height: 15px;
    background-color: transparent;
    border: 1px solid #31cee6;
  }

  .changeCen {
    @include flex-jsb;
  }
  .changeCen-left,
  .changeCen-right {
    width: 890px;
    height: 640px;
    padding: 60px;
    margin-top: 20px;
    margin-bottom: 20px;
    @include moduleBg(bg_890x393);
    overflow: hidden;
  }
  .changeCen-left-analysis-option {
    @include flex-ic-jsb;
  }
  .changeCen-i {
    display: inline-block;
    width: 3px;
    height: 14px;
    margin-top: 6px;
    margin-right: 6px;
    background-color: #2ff0d2;
  }
  .changeCen-left-analysis-option-select
    .el-radio-button__orig-radio:checked
    + .el-radio-button__inner {
    border-radius: 20px;
  }
  .changeCen-right-tableData-content {
    position: relative;
  }
  .changeCen-right-tableData {
    padding: 0 !important;
  }
}
</style>
